<script setup lang="ts">
import { watch, ref } from 'vue'
import QIcon from '@/components/q-icon/q-icon.vue'
import { orderDetailIconConfig } from '@/hooks/useOrderStatus'
import DateUtils from '@/utils/date'

const $props = defineProps({
  updateTime: { type: String, default: '2022-08-12 09:38:48' },
  payTimeOut: { type: String, default: '0' },
  status: {
    type: String,
    default: '暂无状态',
  },
  padding: { type: String, default: '0 100rpx' },
  rightShow: { type: Boolean, default: true },
  countDownShow: { type: Boolean, default: true },
  height: { type: [String, Number], default: '320' },
  countDownLeft: { type: String, default: '剩' },
  countDownRight: { type: String, default: '自动关闭' },
})
const time = ref(0)
const dateTool = new DateUtils()
watch(
  () => $props.payTimeOut,
  (val) => {
    time.value = countdownTime() as number
  },
)

function countdownTime() {
  if (!$props.payTimeOut) return
  const createDate = dateTool.getTime($props.updateTime)
  const timeDifference = createDate + Number($props.payTimeOut) * 1000 - new Date().getTime()
  const time = timeDifference > 0 ? timeDifference : 0
  return time
}
</script>

<template>
  <view class="status" :style="{ background: '#fe4e63', height: $props.height + 'rpx', padding: $props.padding }">
    <view class="status__left" :style="{ background: '#fe4e63', height: $props.height + 'rpx' }">
      <view>{{ status }}</view>
      <view v-if="$props.countDownShow && time" class="status__left--time">
        {{ $props.countDownLeft }}<u-count-down :show-days="false" separator="zh" :timestamp="time" /> {{ $props.countDownRight }}
      </view>
      <!-- <view class="f14">{{ rule[$props.ruleStr].text }}</view> -->
    </view>
    <view v-if="$props.rightShow" class="status__right">
      <q-icon :name="orderDetailIconConfig[status as keyof typeof orderDetailIconConfig]" size="60px" color="#fff" />
    </view>
  </view>
</template>

<style lang="scss" scoped>
@import '@/assets/css/mixins/mixins.scss';
@include b(status) {
  box-sizing: border-box;
  width: 100%;
  padding: 0 100rpx;
  @include flex(space-between);
  @include e(left) {
    @include flex(center, flex-start);
    flex-direction: column;
    color: #fff;
    font-size: 28rpx;
    @include m(time) {
      margin-top: 20rpx;
      @include flex;
    }
  }
  @include e(right) {
    text-align: center;
    width: 170rpx;
    height: 128rpx;
  }
}
</style>
